<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			window.onload = function() {
				var offswitch = true;
				var myapp = new Vue({
					el: "#box",
					data: {
						message: "",
						message2: "no hello world!",
						arr:["苹果","梨子","水蜜桃"],
						city:["西安","北京","上海","广州"]
					},
					methods:{
						show:function() {
							alert("Hello Vue Methods");
							if( offswitch )
							{
							this.arr.push("香瓜");//push(),数组尾部追加数据
							offswitch = false;
							}
							alert(this.arr);
						}
					},
					computed:{
					   reversefun:function(){
					  
					  return this.message.split('').reverse().join('');
					     
					   }
					}
					/*computed属性计算,任何计算的东西都可以放到computed中*/
				})
			}
		</script>
	</head>

	<body>
		<div id="box">
			<input type="text" name="txt" v-model="message" />
				<p>正:{{message}}</p>
				<p>反:{{reversefun}}</p>
			<input type="button" value="按钮" v-on:click="show()">
			<ul>
				<li v-for="(itmes,index) in arr">
					{{itmes}} - {{index}}
				</li>
			</ul>
			<ul>
				<li>城市:</li>
				<!--itme,元素内容. index 每个下标索引-->
				<li v-for="(itme,index) in city">
					{{itme}}
				</li>
			</ul>
		</div>
	</body>
	<!--
    	作者：offline
    	时间：2018-05-29
    	描述：v-on 绑定事件在元素上 ,将元素和事件绑定在一起
    -->

</html>